<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8">
        <title>Galleria Classic Theme Demo 01</title>
        {{#------ include web2py specific js code (jquery, calendar, form stuff) ------}}
        {{include 'web2py_ajax.html'}}
        <script src="{{=URL(r=request,c='static',f='plugin_galleria/galleria.js')}}">
        </script>
        <style>
            html,body{background:#111}
            .content{color:#ccc;font:14px/1.4 arial,sans-serif;width:600px;margin:20px auto}
            h1{line-height:1.1;letter-spacing:-1px;}
            #galleria{height:400px;}
        </style>
    </head>
<body>
    <div class="content">
        <h1>A classic Galleria gallery</h1>
        <div id="galleria">
            <img title="Image title" alt="Image description is fetched from the alt attribute per default." src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Frederic_fontaine_1.jpg/500px-Frederic_fontaine_1.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/500px-Basket_of_strawberries_red_accent.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/500px-Laser_effects.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/500px-Costa_rica_santa_elena_skywalk.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/500px-Kuznetsk_Alatau_3.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/500px-Smoky_forest.jpg">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
        </div>
        <p>This example is a classic gallery that fetches image data from a list of IMG elelments and generates thumbnails. 
            If the thumbnail’s total width exceeds the containing width, Galleria automatically adds a carousel (unless disabled).
            Galleria automatically adjusts it’s width to the containing element’s size.</p>
    </div>
    <script>
    // Load the classic theme
        Galleria.loadTheme('{{=URL(r=request,c='static',f='plugin_galleria/themes/fullscreen/galleria.fullscreen.js')}}');
    
    // Initialize Galleria
    $('#galleria').galleria();

    </script>
    </body>
</html>
